<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抢宿舍</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
    <div>
        注意：认证码为6位
    </div>
    <div>
        你的认证码：<input type="text" id="authCode" value=""/>
    </div>
    <div>
        同住人认证码：  <input type="text" id="otherAuthCode" value=""/>
        <button id="btn1">添加同住人</button>
        <div id="otherAuthCodes">

        </div>
    </div>

    <div id="building">
        可选的宿舍楼：

    </div>
    <div>
        <button id="btn2">抢宿舍</button>
    </div>

    <div id="grabResult"></div>

</body>
<script type="text/javascript">
    $(document).ready(function () {
        var token = localStorage.getItem("token")
        $.ajax({
            type: 'get',
            url: 'http://localhost:8094/order/getBuildings',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            dataType: 'json',
            data: {token},
            success: function (data){
                console.log(data)
                for(let i=0; i<data.length; i++){
                    let a = '<input type="radio" name="choice" value="' + data[i] + '">';
                    a += '<label for="choice' + (i+1)+'">' + data[i] +'</label>';
                    $("#building").append(a);
                }
            }
        })
        let codes = [];
        $("#btn1").click(function (){
            //添加同住人
            let otherAuthCode = $("#otherAuthCode").val();
            if(otherAuthCode !== ""){
                //判断是否为6为
                if(otherAuthCode.length !== 6){
                    alert("认证码长度不为6！");
                    return;
                }
                codes.push(otherAuthCode);
                $("#otherAuthCode").val("");
                $("#otherAuthCodes").text(codes);
            }
        })
        //抢宿舍
        $("#btn2").click(function (){
            var myAuthCode = $("#authCode").val();
            var choiceBuilding = $("#building input[name=\"choice\"]:checked").val();
            console.log(myAuthCode)
            console.log(codes)
            console.log(choiceBuilding)
            $.ajax({
                type: 'post',
                url: 'http://localhost:8094/order/grabDorm',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                dataType: 'json',
                traditional: true,
                data: {
                    myAuthCode,
                    codes,
                    choiceBuilding,
                    token
                },
                success: function (data){
                    //返回抢宿舍成功与否的相关信息
                    console.log(data)
                    if(data.status==1){
                        $("#grabResult").html("")
                        $("#grabResult").append("恭喜你，抢宿舍成功！宿舍信息如下：<br />")
                        $("#grabResult").append("楼号："+data.data.buildingName+"<br />")
                        $("#grabResult").append("宿舍号："+data.data.roomName+"<br />")
                        if(data.data.gender === "0"){
                            $("#grabResult").append("性别：男"+"<br />")
                        }else{
                            $("#grabResult").append("性别：女"+"<br />")
                        }
                        for(var i=0; i<data.data.studentInfo.length; i++){
                            $("#grabResult").append("宿舍成员" + (i+1) + "：" +
                                data.data.studentInfo[i].number +" "+
                                data.data.studentInfo[i].name +
                                "<br />")
                        }
                    }else if(data.status == 400){
                        $("#grabResult").html("")
                        $("#grabResult").append(data.msg+"<br />")
                    }

                }
            })
        })
    })
</script>
</html>